<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作非缘勿扰页面特效 </title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('dt').click(function () {
                $('dd span[id]').css({"color": "#FF0099", "font-weight": "bold"});
            });


            $("#director").click(function () {
                $("dd span[title]").css("font-weight", "bold");
            });


            $('#label').click(function () {
                $("#label~span").css({"background-color": "#E0F8EA", "color": "#10A14B", "padding": "2px 8px"});
            });

            $("img[alt]").click(function () {
                alert("您已收藏成功！");
            });

        });


    </script>


</head>
<body>
<div class='main'>
    <div class='left'>
        <img src="images/pic.gif"/>
        <br/><br/>
        <img src="images/col.gif" alt="收藏本片"/>
    </div>
    <div class='right'>
        <dl>
            <dt>非缘勿扰</dt>
            <dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
            <dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
            <dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧</dd>
            <dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a>
            </dd>
        </dl>
        <img src="images/btn.gif"/>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
